<template>
  <div class="contract-info">
    <!-- 当前签约信息 -->
    <div class="current-contract">
      <div class="contract-header">
        <span class="contract-title">当前签约信息</span>
        <el-button type="text" class="edit-btn">编辑</el-button>
      </div>

      <el-row :gutter="20" class="contract-details">
        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约编号</span>
            <span class="value">{{ contractData.id || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约状态</span>
            <el-tag :type="contractData.status_type || 'info'" size="small">
              {{ contractData.statusName || '-' }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约机构</span>
            <span class="value">{{ contractData.institutionName || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约团队</span>
            <span class="value">{{ contractData.teamName || '-' }}</span>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约医生</span>
            <span class="value">{{ contractData.doctorName || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">服务包</span>
            <span class="value">{{ contractData.packageName || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">费用</span>
            <span class="value">{{ contractData.fee ? '¥' + contractData.fee : '-' }}</span>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="info-item">
            <span class="label">签约周期</span>
            <span class="value">{{ contractData.signCycle || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">申请时间</span>
            <span class="value">{{ formatDateTime(contractData.applyTime) || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">生效日期</span>
            <span class="value">{{ formatDate(contractData.effectiveDate) || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info-item">
            <span class="label">到期日期</span>
            <span class="value">{{ formatDate(contractData.expireDate) || '-' }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 签约记录 -->
    <div class="contract-records">
      <h3 class="section-title">签约记录</h3>
      <el-table :data="contractRecords" stripe>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="institutionName" label="签约机构"></el-table-column>
        <el-table-column prop="teamName" label="签约医生团队"></el-table-column>
        <el-table-column prop="doctorName" label="签约医生"></el-table-column>
        <el-table-column prop="packageName" label="服务包"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status_type || 'info'" size="small">
              {{ scope.row.statusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请时间">
          <template #default="scope">
            {{ formatDateTime(scope.row.applyTime) }}
          </template>
        </el-table-column>
        <el-table-column label="生效时间">
          <template #default="scope">
            {{ formatDate(scope.row.effectiveDate) || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="viewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";

const props = defineProps({
  residentId: {
    type: [String, Number],
    required: true
  }
})

// 响应式数据
const contractData = ref({})
const contractRecords = ref([])

// 时间格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return '-'

  try {
    const date = new Date(dateStr)
    if (isNaN(date.getTime())) return '-'

    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }).replace(/\//g, '-')
  } catch (error) {
    console.error('日期格式化错误:', error)
    return '-'
  }
}

const formatDateTime = (dateStr) => {
  if (!dateStr) return '-'

  try {
    const date = new Date(dateStr)
    if (isNaN(date.getTime())) return '-'

    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  } catch (error) {
    console.error('日期时间格式化错误:', error)
    return '-'
  }
}

const getStatusType = (statusName) => {
  const statusTypeMap = {
    '待审核': 'warning',
    '待服务': 'info',
    '已驳回': 'danger',
    '待支付': 'warning',
    '已完成': 'success'
  }
  return statusTypeMap[statusName] || 'info'
}

const getContractInfo = async () => {
  try {
    const response = await axios.get(`/contract/getContractInfo/${props.residentId}`)
    const contracts = response.data || []

    if (contracts.length > 0) {
      contractData.value = {
        ...contracts[0],
        status_type: getStatusType(contracts[0].statusName)
      }
    } else {
      contractData.value = {}
      ElMessage.info('该居民暂无签约信息')
    }

    contractRecords.value = contracts.map(contract => ({
      ...contract,
      status_type: getStatusType(contract.statusName)
    }))

  } catch (error) {
    console.error('获取签约信息失败:', error)
    ElMessage.error('获取签约信息失败')
    contractData.value = {}
    contractRecords.value = []
  }
}

const viewDetail = (row) => {
  console.log('查看详情:', row)
}

// 组件挂载时执行
onMounted(() => {
  getContractInfo();
})
</script>

<style scoped>
.contract-info {
  background: transparent;
}

.current-contract {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.contract-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.edit-btn {
  color: #409EFF;
  padding: 0;
}

.contract-details {
  margin: 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  min-height: 32px;
}

.label {
  display: inline-block;
  width: 80px;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
  flex-shrink: 0;
}

.value {
  font-size: 14px;
  color: #303133;
  word-break: break-all;
}

.contract-records {
  margin-top: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 20px 0;
}

.el-table {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
}

.el-table ::v-deep .el-table__header {
  background: #f5f7fa;
}

.el-table ::v-deep .el-table__header th {
  background: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.el-table ::v-deep .el-table__body tr:hover > td {
  background: #f5f7fa;
}
</style>